<template>
    <div>
       <h1>vue语法--指令</h1>
       <h1>vue语法--指令222</h1>
       <table class="table table-bordered">
        <tbody>
            <tr>
                <td>会员卡号</td>
                <td><input type="text" v-model="info.code"/></td>
            </tr>
            <tr>
                <td>会员姓名</td>
                <td><input type="text" v-model="info.name"/></td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input type="text" v-model="info.photo" maxlength="11"/></td>
            </tr>
            <tr>
                <td>身份证</td>
                <td><input type="text" v-model="info.card" maxlength="18"/></td>
            </tr>
            <tr>
                <td>等级</td>
                <td>
                    <select v-model="info.level">
                        <option value="">请选择</option>
                        <option value="普通会员">普通会员</option>
                        <option value="赋能会员">赋能会员</option>
                        <option value="黄金会员">黄金会员</option>
                        <option value="超凡会员">超凡会员</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="sex" :value="1" v-model="info.sex"/>男
                    <input type="radio" name="sex" :value="0" v-model="info.sex"/>女
                </td>
            </tr>
            <tr>
                <td>会员爱好</td>
                <td><input type="checkbox" name="likes" value="吃饭" v-model="info.like"/>吃饭
                    <input type="checkbox" name="likes" value="喝蜜雪冰城" v-model="info.like"/>喝蜜雪冰城
                    <input type="checkbox" name="likes" value="刀关志" v-model="info.like"/>刀关志
                    <input type="checkbox" name="likes" value="看书" v-model="info.like"/>看书
                    <input type="checkbox" name="likes" value="茶包袋" v-model="info.like"/>茶包袋
                </td>
            </tr>
            <tr>
                <td>会员简介</td>
                <td>
                    <textarea v-model="info.note" rows="5" cols="50">
                    </textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="增加" class="btn btn-success" @click="add"/></td>
            </tr>
        </tbody>
       </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
let info:any=ref({
    code:'',
    name:'',
    photo:'',
    card:'',
    level:'',
    sex:1,
    like:[],
    note:''
})

const add=()=>{
 console.log(info.value)
}
</script>

<style scoped>

</style>